<template>
  <div class="bg-tx">
    <img src="@/assets/avatar.png" alt="用户头像" class="user-avatar" />
    <div class="tx-user">
      <div class="user-box">
        <div class="user-name">{{ userInfo.name }}</div>
        <div class="user-tag">
          {{
            userInfo.userType == "student"
              ? "学生"
              : userInfo.userType == "staff"
              ? "教职工"
              : userInfo.userType == "worker"
              ? "巡检工作人员"
              : userInfo.userType == "guest"
              ? "游客"
              : "未知"
          }}
        </div>
      </div>
      <div class="user-name mt9">
        学号：
        <div class="name-color">{{ userInfo.account }}</div>
      </div>
      <div class="user-name mt9">
        电话：
        <div class="name-color">{{ userInfo.phone }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";

import { useCounterStore } from "@/stores/counter";
const counterStore = useCounterStore();
// 读取 userInfo（响应式）
const userInfo = computed(() => counterStore.userInfo);

const onClickLeft = () => {
  console.log("fff");
};

onMounted(() => {
  console.log(userInfo.value, "心思");
});
</script>
<style scoped lang="scss">
.bg-tx {
  width: 100%;
  box-sizing: border-box;
  padding: 3.4667vh 0.8vh; /* 35px → 4.6667vh; 6px → 0.8vh */
  display: flex;
  align-items: center;
  border-bottom: 0.1333vh solid #d8d8d8; /* 1px → 0.1333vh */
  margin-bottom: 3.3333vh; /* 25px → 3.3333vh */

  .user-avatar {
    width: 8vh; /* 60px → 8vh */
    height: 8vh; /* 60px → 8vh */
    border-radius: 50%;
  }

  .tx-user {
    margin-left: 2.1333vh; /* 16px → 2.1333vh */
    width: calc(100% - 8.8vh); /* 66px → 8.8vh */

    .user-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .user-tag {
      font-weight: 400;
      font-size: 1.4667vh; /* 11px → 1.4667vh */
      color: #47ba7f;
      box-sizing: border-box;
      padding: 0.4vh 1.2vh; /* 3px → 0.4vh; 9px → 1.2vh */
      background-color: #dffff4;
    }

    .user-name {
      font-size: 14px; /* 16px → 2.1333vh */
      color: #1b1b1b;
      display: flex;
      align-items: center;

      .name-color {
        font-size: 14px;
        font-weight: bold;
      }
    }

    .mt9 {
      margin-top: 2px; /* 9px → 1.2vh */
    }
  }
}
</style>
